<template>
  <div class="payMent">
    <div class="mask"></div>
    <div class="pay_ment">
      <div class="pay_top">
        <p class="p">开通服务</p>
        <i class="el-icon-close"></i>
      </div>

      <div class="content_m">
        <div class="edition">
          <p>开通服务</p>
          <el-radio v-model="radio1" label="1" border>旗舰版本</el-radio>
          <el-radio v-model="radio1" label="2" border>企业版本</el-radio>
          <el-radio v-model="radio1" label="3" border>专业版本</el-radio>
        </div>
        <div class="edition">
          <p>开通时长</p>
          <el-radio v-model="radio2" label="1" border>永久使用</el-radio>
        </div>
        <div class="edition">
          <p>支付方式</p>
          <el-radio v-model="radio3" label="1" border>扫码支付</el-radio>
          <el-radio v-model="radio3" label="2" border>银行转账</el-radio>
        </div>

        <div class="bank">
          <div class="bank1">
            <el-radio v-model="radio4" label="1" border
              ><img
                class="bank_img"
                src="../../../assets/bank/1.png"
                alt=""
              />招商银行</el-radio
            >
            <el-radio v-model="radio4" label="2" border
              ><img
                class="bank_img"
                src="../../../assets/bank/2.png"
                alt=""
              />工商银行</el-radio
            >
            <el-radio v-model="radio4" label="3" border
              ><img
                class="bank_img"
                src="../../../assets/bank/3.png"
                alt=""
              />建设银行</el-radio
            >
            <el-radio v-model="radio4" label="4" border
              ><img
                class="bank_img"
                src="../../../assets/bank/4.png"
                alt=""
              />农业银行</el-radio
            >
            <el-radio v-model="radio4" label="5" border
              ><img
                class="bank_img"
                src="../../../assets/bank/5.png"
                alt=""
              />中国银行</el-radio
            >
          </div>
          <div class="bank1">
            <el-radio v-model="radio4" label="6" border
              ><img
                class="bank_img"
                src="../../../assets/bank/6.png"
                alt=""
              />兴业银行</el-radio
            >
            <el-radio v-model="radio4" label="7" border
              ><img
                class="bank_img"
                src="../../../assets/bank/7.png"
                alt=""
              />北京银行</el-radio
            >
            <el-radio v-model="radio4" label="8" border
              ><img
                class="bank_img"
                src="../../../assets/bank/8.png"
                alt=""
              />光大银行</el-radio
            >
            <el-radio v-model="radio4" label="9" border
              ><img
                class="bank_img"
                src="../../../assets/bank/9.png"
                alt=""
              />交通银行</el-radio
            >
            <el-radio v-model="radio4" label="10" border
              ><img
                class="bank_img"
                src="../../../assets/bank/10.png"
                alt=""
              />民生银行</el-radio
            >
          </div>
          <div class="bank1">
            <el-radio v-model="radio4" label="11" border
              ><img
                class="bank_img"
                src="../../../assets/bank/11.png"
                alt=""
              />中信银行</el-radio
            >
            <el-radio v-model="radio4" label="12" border
              ><img
                class="bank_img"
                src="../../../assets/bank/12.png"
                alt=""
              />平安银行</el-radio
            >
            <el-radio v-model="radio4" label="13" border
              ><img
                class="bank_img"
                src="../../../assets/bank/13.png"
                alt=""
              />邮政银行</el-radio
            >
            <el-radio v-model="radio4" label="14" border
              ><img
                class="bank_img"
                src="../../../assets/bank/14.png"
                alt=""
              />宁波银行</el-radio
            >
            <el-radio v-model="radio4" label="15" border
              ><img
                class="bank_img"
                src="../../../assets/bank/15.png"
                alt=""
              />南京银行</el-radio
            >
          </div>
          <div class="bank1">
            <el-radio v-model="radio4" label="16" border
              ><img
                class="bank_img"
                src="../../../assets/bank/16.png"
                alt=""
              />广发银行</el-radio
            >
            <el-radio v-model="radio4" label="17" border
              ><img
                class="bank_img"
                src="../../../assets/bank/17.png"
                alt=""
              />浦发银行</el-radio
            >
            <el-radio v-model="radio4" label="18" border
              ><img
                class="bank_img"
                src="../../../assets/bank/18.png"
                alt=""
              />上海农商</el-radio
            >
            <el-radio v-model="radio4" label="19" border
              ><img
                class="bank_img"
                src="../../../assets/bank/19.png"
                alt=""
              />东亚银行</el-radio
            >
          </div>
        </div>

        <p class="p1">收款方信息</p>
        <div class="box">
          <p>你需汇款 {{ a }} 至以下账户</p>
          <p>收款方户名：{{ b }}</p>
          <p>收款方银行：{{ c }}</p>
          <p>收款方账户：{{ d }}</p>
        </div>

        <p class="p1">付款方信息</p>
        <div class="box1">
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>付款方名：</p>
            </div>
            <el-input v-model="value"></el-input>
          </div>
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>付款账号：</p>
            </div>
            <el-input v-model="value"></el-input>
          </div>
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>付款金额：</p>
            </div>
            <el-input v-model="value"></el-input>
          </div>
        </div>

        <p class="p1">开具发票</p>
        <div class="box2">
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>是否开发票：</p>
            </div>

            <el-radio style="margin-top:6px" v-model="radio5" label="1"
              >需要（包邮）</el-radio
            >
            <el-radio style="margin-top:6px" v-model="radio5" label="2"
              >不需要</el-radio
            >
          </div>
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>抬头名称：</p>
            </div>

            <el-input v-model="value" placeholder="请输入抬头名称"></el-input>
          </div>
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>纳税人识别号：</p>
            </div>

            <el-input
              v-model="value"
              placeholder="请输入纳税人识别号"
            ></el-input>
          </div>
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>公司注册地址：</p>
            </div>

            <el-input
              v-model="value"
              placeholder="请输入公司注册地址"
            ></el-input>
          </div>
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>电话：</p>
            </div>

            <el-input v-model="value" placeholder="请输入电话"></el-input>
          </div>
        </div>

        <!-- 地址 -->
        <div class="address">
          <p>邮寄地址：请选择下列邮寄地址</p>
          <div style="margin-left:80px">
            <el-radio style="margin-top:6px" v-model="radio5" label="1"
              >地址11</el-radio
            >
          </div>
          <div style="margin-left:80px">
            <el-radio style="margin-top:6px" v-model="radio5" label="2"
              >地址2</el-radio
            >
          </div>
        </div>

        <!-- 填写地址 -->
        <div class="i_address">
          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>收货人姓名：</p>
            </div>
            <el-input
              v-model="value"
              placeholder="请输入纳税人识别号"
            ></el-input>
          </div>

          <div class="_input1">
            <div class="p3">
              <p class="p2">*</p>
              <p>地区：</p>
            </div>
            <div style="sty">
              <el-select v-model="value" placeholder="选择省">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>详细地址：</p>
            </div>
            <el-input v-model="value" placeholder="请输入详细地址"></el-input>
          </div>

          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>手机号码：</p>
            </div>
            <el-input v-model="value" placeholder="请输入手机号码"></el-input>
          </div>

          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>邮箱：</p>
            </div>
            <el-input v-model="value" placeholder="请输入邮箱"></el-input>
          </div>

          <div class="_input">
            <div class="p3">
              <p class="p2">*</p>
              <p>电话：</p>
            </div>
            <el-input
              v-model="value"
              placeholder="区号-电话号码-分机"
            ></el-input>
          </div>
        </div>

        <div class="pay">
          <div style="display:flex">
            <p style="padding-top:8px;">实付金额：</p>
            <p class="p4">￥{{ E }}</p>
          </div>
          <el-button type="primary">支付</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {},
  data() {
    return {
      value: "",
      radio1: "",
      radio2: "",
      radio3: "2",
      radio4: "",
      radio5: "",
      a: "2999",
      b: "广州市嘉伈软件有限公司",
      c: "中国工商银行（华南分行）",
      d: "100000000000000",
      E: "2999",
    };
  },
};
</script>
<style scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.pay_ment {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 630px;
  height: 100%;
  z-index: 99;
  background-color: white;
  overflow: auto;
  border: 1px solid black;
}
.pay_top {
  height: 40px;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  background: #f4f4f4;
}
.p {
  font-weight: 700;
}
.content_m {
  width: 600px;
  margin: 15px auto;
  /* border: 1px solid black; */
}

.edition {
  display: flex;
  height: 40px;
  margin-bottom: 10px;
}
.edition p {
  margin: 8px 6px 0 0;
  height: 40px;
}
.bank_img {
  position: absolute;
  bottom: 7px;
  left: 22px;
}
.bank1 {
  margin-bottom: 8px;
}
.p1 {
  margin: 15px 0 0 5px;
  font-size: 18px;
}
.box {
  height: 125px;
  width: 100%;
  border: 1px solid #f4f4f4;
  padding: 0 0 0 40px;
}
.box p:first-child {
  margin: 10px 0 10px -10px;
}
.box1 {
  height: 125px;
  width: 100%;
  border: 1px solid #f4f4f4;
  padding: 0 0 0 40px;
  /* display: flex */
}
.p2 {
  color: red;
  margin: 0 3px 0 0;
}
.p3 {
  /* display: inline-block; */
  width: 133px;
  display: flex;
  /* text-align: right; */
  justify-content: flex-end;
}
._input {
  display: flex;
  margin: 10px 0 0 0;
}
._input1 {
  display: flex;
  margin: 10px 0 0 0;
}
.box2 {
  height: 200px;
  width: 100%;
  border: 1px solid #f4f4f4;
  padding: 0 0 0 40px;
  /* display: flex */
}
.address {
  width: 100%;
  /* height: 100px; */
  margin-top: 10px;
  padding: 0 0 0 90px;
}
.i_address {
  width: 100%;
  background: #f4f4f4;
  padding: 10px 0 10px 40px;
}
.pay {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}
.p4 {
  font-size: 26px;
  font-weight: 600;
  color: #017aff;
}
</style>

<style>
.payMent .pay_ment .content_m .edition .el-radio {
  margin-right: 2px;
  padding: 10px 11px 0 9px;
  height: 35px;
}
.payMent .pay_ment .content_m .bank .el-radio {
  padding: 10px 6px 0 3px;
  margin-right: 3px;
  height: 35px;
  position: relative;
}
.payMent .pay_ment .content_m .bank .el-radio__label {
  padding-left: 27px;
}
.payMent .pay_ment .content_m ._input .el-input__inner {
  height: 30px;
  width: 75%;
}
.payMent .pay_ment .content_m .pay .el-button {
  width: 120px;
}
</style>
